<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 门店审批
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="序号" width="55" align="center">
                    <template slot-scope="scope">
                        {{scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column prop="storeName" label="门店名称"></el-table-column>
                <el-table-column label="门店地址" prop="storeAddr"></el-table-column>
                <el-table-column label="门店电话" prop="storeTel"></el-table-column>
                <el-table-column prop="scopeTime" label="营业时间"></el-table-column>
                <el-table-column label="提出日期">
                    <template slot-scope="scope">
                        {{formatDate(tableData[scope.$index].createTime)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleAgree(tableData[scope.$index].id)"
                        >同意</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleRefuse(tableData[scope.$index].id)"
                        >拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageNum"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { getStoreApproval,agreeApproval,refuseApproval } from '../../api/storeApproval';
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 5
            },
            agreeParam:{
                id: ''
            },
            refuseParam:{
                id: ''
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },
    created() {
        this.getData();
        this.webSocket();
    },
    methods: {
        formatDate(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return year + '年' + month + '月' + day + '日';
        },
        webSocket() {
            const that = this;
            if (typeof (WebSocket) == 'undefined') {
                this.$notify({
                    title: '提示',
                    message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
                    type: 'warning',
                    duration: 5000,
                    position: 'bottom-right'
                });
            } else {
                // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
                const socketUrl = 'ws://http://funvalue.top:23323/message';
                var socket = new WebSocket(socketUrl);
                // 监听socket打开
                socket.onopen = function() {
                    console.log('浏览器WebSocket已打开');
                };
                // 监听socket消息接收
                socket.onmessage = function(msg) {
                    // // 转换为json对象
                    // const data = JSON.parse(msg.data);
                    // console.log(data)
                    // console.log(msg);
                    that.$notify({
                        title: '消息推送',
                        message: JSON.parse(msg.data).msg,
                        type: 'success',
                        duration: 0,
                        position: 'bottom-right'
                    })
                };
                // 监听socket错误
                socket.onerror = function() {
                    that.$notify({
                        title: '错误',
                        message: '服务器错误，无法接收实时报警信息',
                        type: 'error',
                        duration: 5000,
                        position: 'bottom-right'
                    });
                };
            }
        },
        getData() {
            getStoreApproval(this.query).then(res => {
                console.log(res);
                this.tableData = res.data.list
                this.pageTotal = res.data.total
            })
        },
        // 拒绝操作
        handleRefuse(id) {
            // 二次拒绝确认
            this.$confirm('确定要拒绝吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.refuseParam.id = id;
                    refuseApproval(this.refuseParam).then(res => {
                        if(res.code == 200){
                            this.$message.success('拒绝成功');
                            this.getData();
                        }else{
                            this.$message.error('拒绝失败');
                        }
                    })
                })
                .catch(() => {});
        },
        // 同意操作
        handleAgree(id) {
            // 二次同意确认
            this.$confirm('确定要同意吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.agreeParam.id = id;
                    agreeApproval(this.agreeParam).then(res => {
                        if(res.code == 200){
                            this.$message.success('审批通过');
                            this.getData();
                        }else{
                            this.$message.error('审批失败');
                        }
                    })
                })
                .catch(() => {});
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.getData()
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
